<template>
  <div style="margin: 20px">
    <div style="margin: 10px 20px">
      <template>
        <div class="center-container">
          <el-steps style="width: 80%; max-width: 800px" :active="active" align-center>
            <el-step title="第一步"/>
            <el-step title="第二步"/>
            <el-step title="第三步"/>
            <el-step v-if="step" title="第四步"/>
          </el-steps>
        </div>
      </template>
      <el-form ref="ruleForm" :inline="true" :model="dataForm" label-width="100px" class="product-form">
        <!--   第一步     -->
        <div v-if="active == 0">
          <el-row>
            <el-col :span="24">
              <el-form-item label="规则名称:" prop="ruleName">
                <el-input v-model="dataForm.ruleName" :disabled="type == 'view'" size="small" style="width: 100%;"
                          placeholder="请输入规则名称"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="规则类型:" prop="ruleType">
                <el-select v-model="dataForm.ruleType" :disabled="type == 'view'" size="small" placeholder="请选择规则条件类型"
                           style="width: 100%;">
                  <el-option
                    v-for="item in ruleTypeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="计算类型:" prop="computeType">
                <el-select v-model="dataForm.computeType" :disabled="type == 'view'" size="small" placeholder="请选择计算类型"
                           style="width: 100%;" @change="selectComputeType">
                  <el-option
                    v-for="item in computeTypeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value * 1">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <!--   第二步     -->
        <div v-if="active == 1">
          <el-row>
            <el-col :span="24">
              <el-form-item label="处理类型:" prop="processingType">
                <el-select v-model="dataForm.processingType" :disabled="type == 'view'" size="small" placeholder="请选择规则条件类型"
                           style="width: 100%;" @change="selectProcessingType">
                  <el-option
                    v-for="item in processingTypeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="条件类型:" prop="conditionType">
                <el-select v-model="dataForm.conditionType" :disabled="type == 'view' || readOnly" size="small" placeholder="请选择规则条件类型"
                           style="width: 100%;" @change="selectRuleConditionType">
                  <el-option
                    v-for="item in ruleConditionTypeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="!selectProcessingOnly">
            <el-col :span="24" v-if="conditionReadOnly">
              <el-form-item label="参数:" prop="ruleThreshold">
                <el-input v-model="dataForm.ruleThreshold" :disabled="type == 'view'" size="small" style="width: 100%;"
                          placeholder="请输入参数"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="!conditionReadOnly">
              <el-form-item label="参数1:" prop="ruleThreshold1">
                <el-input v-model="dataForm.ruleThreshold1" :disabled="type == 'view'" size="small" style="width: 100%;"
                          @change="ruleThresholdData" placeholder="请输入参数1"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="!conditionReadOnly">
              <el-form-item label="参数2:" prop="ruleThreshold2">
                <el-input v-model="dataForm.ruleThreshold2" :disabled="type == 'view'" size="small" style="width: 100%;"
                          @change="ruleThresholdData" placeholder="请输入参数2"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="selectProcessingOnly">
            <el-col :span="24" v-if="conditionReadOnly">
              <el-form-item label="参数:" prop="ruleThreshold">
                <el-input-number v-model="dataForm.ruleThreshold" :disabled="type == 'view'" size="small" style="width: 100%;"
                                 placeholder="请输入参数"></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="!conditionReadOnly">
              <el-form-item label="参数1:" prop="ruleThreshold1">
                <el-input-number v-model="dataForm.ruleThreshold1" :disabled="type == 'view'" size="small" style="width: 100%;"
                                 @change="ruleThresholdData" placeholder="请输入参数1"></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="!conditionReadOnly">
              <el-form-item label="参数2:" prop="mark">
                <el-input-number v-model="dataForm.ruleThreshold2" :disabled="type == 'view'" size="small" style="width: 100%;"
                                 @change="ruleThresholdData" placeholder="请输入参数2"></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <!--   第三步     -->
        <div v-if="active == 2">
          <el-row>
            <el-col :span="24">
              <el-form-item label="时间类型:" prop="timeType">
                <el-select v-model="dataForm.timeType" :disabled="type == 'view'" size="small" placeholder="请选择规则条件类型"
                           style="width: 100%;" @change="selectTimeTypeType">
                  <el-option
                    v-for="item in timeTypeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value * 1">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="时间参数:" prop="timeTypeOnly">
                <el-input-number v-model="dataForm.timeValue"
                                 :disabled="type == 'view'"
                                 size="small"
                                 style="width: 100%;"
                                 :controls="false"
                                 :min="1"
                                 :precision="0"
                                 placeholder="请输入参数">
                </el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <!--   第四步     -->
        <div v-if="active == 3">
          <el-row>
            <el-col>
              <el-form-item label="规则表达式:">
                <el-input v-model="ruleExpression" size="small" style="width: 100%;"
                          :disabled="true"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
    </div>
    <div class="dialog-footer">
      <el-button style="margin-top: 12px" v-if="active != 0" @click="previous">上一步</el-button>
      <el-button style="margin-top: 12px" v-if="active != 3" @click="next">下一步</el-button>
      <el-button style="margin-top: 12px" v-if="type != 'view' && active == 3" type="primary" @click="headSave">保存</el-button>
    </div>
  </div>
</template>

<script>
import {detail, submit} from '@/api/warning/warningRule-api.js'

export default {
  name: 'add',
  props: {
    rowData: {
      type: Object,
    }
  },
  data() {
    return {
      step: false,
      dispositionData: {
        ruleName: '',
        ruleType: '',
        processingType: '',
        conditionType: '',
        ruleThreshold: '',
        ruleThreshold1: '',
        ruleThreshold2: '',
      },
      active: 0,
      configurationData: [], // 配置列表
      recordData: [], // 记录列表
      activeTab: 'point',
      title: '规则新增',
      type: 'view',
      dataForm: {
        ruleName: '',
        ruleType: '',
        computeType: '',
        timeType: '',
        timeValue: '',
        processingType: '',
        conditionType: '',
        ruleThreshold: '',
        ruleThreshold1: '',
        ruleThreshold2: '',
      },
      readOnly: true,
      selectProcessingOnly: false,
      conditionReadOnly: true,
      timeTypeOnly: false,
      tableData: [],
      ruleTypeOptions: [],
      computeTypeOptions: [],
      timeTypeOptions: [],
      ruleConditionTypeOptions: [],
      processingTypeOptions: [],
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      }
    }
  },
  computed: {
    ruleExpression() {
      if (this.dataForm.processingType != 'string') {
        this.dataForm.ruleThreshold = Number(this.dataForm.ruleThreshold);
        this.dataForm.ruleThreshold1 = Number(this.dataForm.ruleThreshold1);
        this.dataForm.ruleThreshold2 = Number(this.dataForm.ruleThreshold2);
        const {ruleThreshold1, ruleThreshold2} = this.dataForm;
        if (ruleThreshold1 && ruleThreshold2) {
          if (ruleThreshold1 > ruleThreshold2) {
            this.$message.warning("参数有误请重新填写！");
            return '';
          }
        }
      }
      if (this.conditionReadOnly) {
        const {conditionType, ruleThreshold, timeType, timeValue, computeType} = this.dataForm;
        let conditionTypeValue = '';
        let timeTypeValue = '';
        let computeTypeValue = '';
        if (timeType == 0) {
          if (conditionType && ruleThreshold != null && computeType) {
            const foundItem = this.ruleConditionTypeOptions.find(item => item.value == conditionType);
            conditionTypeValue = foundItem.label;
            const computeItem = this.computeTypeOptions.find(item => item.value == computeType);
            computeTypeValue = computeItem.label;
            this.dataForm.ruleExpression = `${computeTypeValue}${conditionTypeValue}${ruleThreshold}`;
            return `${computeTypeValue}${conditionTypeValue}${ruleThreshold}`;
          } else {
            return '';
          }
        } else {
          if (conditionType && ruleThreshold && timeValue && computeType) {
            const foundItem = this.ruleConditionTypeOptions.find(item => item.value == conditionType);
            const timeItem = this.timeTypeOptions.find(item => item.value == timeType);
            const computeItem = this.computeTypeOptions.find(item => item.value == computeType);
            conditionTypeValue = foundItem.label;
            timeTypeValue = timeItem.label;
            computeTypeValue = computeItem.label;
            this.dataForm.ruleExpression = `${timeValue}${timeTypeValue}内${computeTypeValue}${conditionTypeValue}${ruleThreshold}`;
            return `${timeValue}${timeTypeValue}内${computeTypeValue}${conditionTypeValue}${ruleThreshold}`;
          } else {
            return '';
          }
        }
      } else {
        const {conditionType, ruleThreshold1, ruleThreshold2, timeType, timeValue, computeType} = this.dataForm;
        if (timeType == 0) {
          if (conditionType && ruleThreshold1 && ruleThreshold2 && computeType) {
            let ruleThreshold = `${ruleThreshold1}~${ruleThreshold2}`;
            let link = '';
            let conditionTypeValue = '';
            let delimiter = '...';
            let computeTypeValue = '';
            this.dataForm.ruleThreshold = ruleThreshold;

            const foundItem = this.ruleConditionTypeOptions.find(item => item.value == conditionType);
            const computeItem = this.computeTypeOptions.find(item => item.value == computeType);
            computeTypeValue = computeItem.label;
            if (foundItem) {
              let value = foundItem.label;
              let delimiterIndex = value.indexOf(delimiter);
              if (delimiterIndex !== -1) {
                link = value.substring(0, delimiterIndex);
                conditionTypeValue = value.substring(delimiterIndex + delimiter.length);
              }
            }
            this.dataForm.ruleExpression = `${computeTypeValue}${link}${ruleThreshold}${conditionTypeValue}`;
            return `${computeTypeValue}${link}${ruleThreshold}${conditionTypeValue}`;
          } else {
            return '';
          }
        } else {
          if (conditionType && ruleThreshold1 && ruleThreshold2 && timeValue && computeType) {
            let ruleThreshold = `${ruleThreshold1}~${ruleThreshold2}`;
            let link = '';
            let conditionTypeValue = '';
            let delimiter = '...';
            let timeTypeValue = '';
            let computeTypeValue = '';
            this.dataForm.ruleThreshold = ruleThreshold;
            const timeItem = this.timeTypeOptions.find(item => item.value == timeType);
            timeTypeValue = timeItem.label;
            const computeItem = this.computeTypeOptions.find(item => item.value == computeType);
            computeTypeValue = computeItem.label;

            const foundItem = this.ruleConditionTypeOptions.find(item => item.value == conditionType);
            if (foundItem) {
              let value = foundItem.label;
              let delimiterIndex = value.indexOf(delimiter);
              if (delimiterIndex !== -1) {
                link = value.substring(0, delimiterIndex);
                conditionTypeValue = value.substring(delimiterIndex + delimiter.length);
              }
            }
            this.dataForm.ruleExpression = `${timeValue}${timeTypeValue}内${computeTypeValue}${link}${ruleThreshold}${conditionTypeValue}`;
            return `${timeValue}${timeTypeValue}内${computeTypeValue}${link}${ruleThreshold}${conditionTypeValue}`;
          } else {
            return '';
          }
        }
      }
    },
  },
  created() {
    this.ruleTypeOptions = this.$store.state.dict.dictDatas.rule_type
    this.computeTypeOptions = this.$store.state.dict.dictDatas.compute_type
    this.processingTypeOptions = this.$store.state.dict.dictDatas.processing_type
    this.timeTypeOptions = this.$store.state.dict.dictDatas.time_type
  },
  mounted() {
    this.type = this.rowData.type;
    let row = JSON.parse(this.rowData.row);
    if (row.id && row.id != -1) {
      this.detail(row.id);
    }
  },
  methods: {
    ruleThresholdData() {
      let {ruleThreshold1, ruleThreshold2} = this.dataForm
      if (!ruleThreshold1) {
        ruleThreshold1 = 0;
      }
      if (!ruleThreshold2) {
        ruleThreshold2 = 0;
      }
      this.dataForm.ruleThreshold = ruleThreshold1 + '~' + ruleThreshold2;
    },
    active1() {
      if (!this.dataForm.ruleName || !this.dataForm.computeType) {
        this.$message.warning("请完成规则配置基本信息！");
      } else {
        this.active++;
        this.dispositionData.ruleType = this.dataForm.ruleType;
      }
    },
    active2() {
      if (!this.dataForm.processingType || !this.dataForm.conditionType || this.dataForm.ruleThreshold == null) {
        this.$message.warning("请完成规则配置基本信息！");
      } else {
        if (this.dataForm.computeType == 1 || this.dataForm.computeType == 2) {
          this.active += 2;
          this.dataForm.timeType = 0;
        } else {
          this.active++;
        }
        var {ruleThreshold1, ruleThreshold2} = this.dataForm
        if (ruleThreshold1 > ruleThreshold2) {
          var temp = ruleThreshold1
          ruleThreshold1 = ruleThreshold2
          ruleThreshold2 = temp
          this.dataForm.ruleThreshold1 = ruleThreshold1
          this.dataForm.ruleThreshold2 = ruleThreshold2
        }
        this.dispositionData.processingType = this.dataForm.processingType;
        this.dispositionData.conditionType = this.dataForm.conditionType;
        this.dispositionData.ruleThreshold = this.dataForm.ruleThreshold;
      }
    },
    active3() {
      if (this.dataForm.timeType == 0) {
        if (!this.dataForm.timeType) {
          this.$message.warning("请完成规则配置基本信息！");
        } else {
          this.active++;
          this.dispositionData.timeType = this.dataForm.timeType;
        }
      } else {
        if (!this.dataForm.timeType || !this.dataForm.timeValue) {
          this.$message.warning("请完成规则配置基本信息！");
        } else {
          this.active++;
          this.dispositionData.timeType = this.dataForm.timeType;
          this.dispositionData.timeValue = this.dataForm.timeValue;
        }
      }
    },
    next() {
      switch (this.active) {
        case 0:
          this.active1();
          break;
        case 1:
          this.active2();
          break;
        case 2:
          this.active3();
          break;
      }
    },
    previous() {
      if (this.active == 3 && (this.dataForm.computeType == 1 || this.dataForm.computeType == 2)) {
        this.active -= 2;
      } else {
        this.active--;
      }
    },
    headCancel() {
      this.$emit('ruleDialogClose')
    },
    selectProcessingType() {
      if (this.dataForm.processingType != 'string') {
        this.selectProcessingOnly = true
        this.ruleConditionTypeOptions = this.$store.state.dict.dictDatas.rule_condition_type
        this.readOnly = false;
      } else {
        this.selectProcessingOnly = false
        this.ruleConditionTypeOptions = this.$store.state.dict.dictDatas.rule_condition_type_string
        this.readOnly = false;
      }
      this.selectSettingAsideSection()
    },
    selectRuleConditionType() {
      let type = ['7', '8', '9', '10']
      this.conditionReadOnly = !type.includes(this.dataForm.conditionType);
    },
    selectTimeTypeType() {
      if (this.dataForm.timeType == 0) {
        this.timeTypeOnly = false
      } else {
        this.timeTypeOnly = true
      }
    },
    selectComputeType() {
      if (this.dataForm.computeType === 1 || this.dataForm.computeType === 2) {
        this.step = false
      } else {
        this.step = true
      }
    },
    selectSettingAside() {
      this.dataForm.processingType = '';
      this.dataForm.conditionType = '';
      this.dataForm.ruleThreshold = '';
      this.dataForm.ruleThreshold1 = '';
      this.dataForm.ruleThreshold2 = '';
      this.ruleConditionTypeOptions = []
      this.readOnly = true;
    },
    selectSettingAsideSection() {
      this.dataForm.conditionType = '';
      this.dataForm.ruleThreshold = '';
      this.dataForm.ruleThreshold1 = '';
      this.dataForm.ruleThreshold2 = '';
    },
    headSave(type) {
      if (this.active == 3) {
        this.$refs["ruleForm"].validate((valid) => {
          if (valid) {
            this.$loading();
            submit(this.dataForm)
              .then((res) => {
                const {code} = res
                if (code === 0) {
                  this.$message.success("操作成功");
                  this.headCancel()
                } else {
                  this.$message.success(msg);
                }
              })
              .finally(() => {
                this.$loading().close();
              });
          }
        })
      } else {
        this.$message.warning("请先完成配置再进行保存！")
      }
    },
    detail(id) {
      detail(id).then(res => {
        this.dataForm = res.data;
        this.readOnly = false;
        if (this.dataForm.processingType != 'string') {
          this.ruleConditionTypeOptions = this.$store.state.dict.dictDatas.rule_condition_type
          this.selectProcessingOnly = true;
          let type = ['7', '8', '9', '10']
          this.dataForm.conditionType = this.dataForm.conditionType.toString()
          if (type.includes(this.dataForm.conditionType)) {
            this.conditionReadOnly = false;
            let index = "~";
            let delimiterIndex = this.dataForm.ruleThreshold.indexOf(index)
            if (delimiterIndex !== -1) {
              this.dataForm.ruleThreshold1 = this.dataForm.ruleThreshold.substring(0, delimiterIndex) * 1;
              this.dataForm.ruleThreshold2 = this.dataForm.ruleThreshold.substring(delimiterIndex + index.length) * 1;
            }
          } else {
            this.dataForm.ruleThreshold = this.dataForm.ruleThreshold * 1;
          }
        } else {
          this.ruleConditionTypeOptions = this.$store.state.dict.dictDatas.rule_condition_type_string
          this.selectProcessingOnly = false;
          let type = ['7', '8', '9', '10']
          this.dataForm.conditionType = this.dataForm.conditionType.toString()
          if (type.includes(this.dataForm.conditionType)) {
            this.conditionReadOnly = false;
          }
        }
      })
    },
    duplicateRemoval(p, q) {
      let uniqueList = [...p, ...q].reduce((acc, item) => {
        const found = acc.find(element => element.value === item.value);
        if (!found) {
          acc.push(item);
        }
        return acc;
      }, []);
    },
    // 点击切换 TAB
    handleTabClick() {

    },
  }
}
</script>
<style scoped lang="scss">
.product-form ::v-deep .el-textarea__inner {
  resize: none;
  min-height: 111.6px !important;
}

.product-form ::v-deep .el-form-item {
  width: 100%;
}

.product-form ::v-deep .el-form-item__content {
  width: calc(100% - 100px);
}

.product-form ::v-deep .el-form-item__label {
  color: #3f4448;
  font-weight: 400;
}

.dialog-footer {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 12px 0;
  border-top: 1px solid rgb(204, 204, 204);
}

.center-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 30px;
}
</style>
